<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>编辑用户</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        success: '#10b981',
                        danger: '#ef4444',
                        neutral: '#f1f5f9'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
            }
            .transition-smooth {
                @apply transition-all duration-300 ease-in-out;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
<div class="container mx-auto px-4 py-8 max-w-3xl">
    <!-- 页面标题 -->
    <div class="mb-8 text-center">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800">
            <i class="fa fa-user-circle mr-2 text-primary"></i>编辑用户
        </h2>
        <p class="text-gray-500 mt-2">修改用户信息并保存更改</p>
    </div>

    <!-- 表单卡片 -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden transition-smooth hover:shadow-lg">
        <form action="${pageContext.request.contextPath}/user/edit" method="post" class="p-6 md:p-8">
            <input type="hidden" name="uid" value="${user.uid}">

            <!-- 表单网格布局 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 姓名输入 -->
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fa fa-user mr-1 text-primary"></i>姓名
                    </label>
                    <input type="text" id="name" name="name" value="${user.name}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus transition-smooth">
                </div>

                <!-- 用户名输入 -->
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fa fa-id-card mr-1 text-primary"></i>用户名
                    </label>
                    <input type="text" id="username" name="username" value="${user.username}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus transition-smooth">
                </div>

                <!-- 密码输入 -->
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fa fa-lock mr-1 text-primary"></i>密码
                    </label>
                    <input type="password" id="password" name="password" value="${user.password}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus transition-smooth">
                </div>

                <!-- 电话输入 -->
                <div>
                    <label for="number" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fa fa-phone mr-1 text-primary"></i>电话
                    </label>
                    <input type="text" id="number" name="number" value="${user.number}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus transition-smooth">
                </div>

                <!-- 邮箱输入 -->
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fa fa-envelope mr-1 text-primary"></i>邮箱
                    </label>
                    <input type="email" id="email" name="email" value="${user.email}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus transition-smooth">
                </div>

                <!-- 积分输入 -->
                <div>
                    <label for="scorenum" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fa fa-star mr-1 text-primary"></i>积分
                    </label>
                    <input type="text" id="scorenum" name="scorenum" value="${user.scorenum}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus transition-smooth">
                </div>

                <!-- 头像URL输入 -->
                <div class="md:col-span-2">
                    <label for="icon" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fa fa-image mr-1 text-primary"></i>头像URL
                    </label>
                    <input type="text" id="icon" name="icon" value="${user.icon}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus transition-smooth">
                </div>

                <!-- 角色选择 -->
                <div class="md:col-span-2">
                    <label for="role" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fa fa-briefcase mr-1 text-primary"></i>角色
                    </label>
                    <select id="role" name="role"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus transition-smooth appearance-none bg-white">
                        <option value="0" ${user.role == 0 ? 'selected' : ''}>管理员</option>
                        <option value="1" ${user.role == 1 ? 'selected' : ''}>学生</option>
                        <option value="2" ${user.role == 2 ? 'selected' : ''}>教师</option>
                    </select>
                    <!-- 自定义下拉箭头 -->
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                        <i class="fa fa-chevron-down text-xs"></i>
                    </div>
                </div>
            </div>

            <!-- 提交按钮和返回链接 -->
            <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
                <button type="submit"
                        class="px-6 py-3 bg-primary text-white font-medium rounded-lg shadow hover:bg-primary/90 focus:ring-4 focus:ring-primary/30 transition-smooth flex items-center justify-center">
                    <i class="fa fa-save mr-2"></i>保存更改
                </button>
                <a href="${pageContext.request.contextPath}/user/list"
                   class="px-6 py-3 bg-gray-200 text-gray-700 font-medium rounded-lg hover:bg-gray-300 focus:ring-4 focus:ring-gray-200 transition-smooth flex items-center justify-center">
                    <i class="fa fa-arrow-left mr-2"></i>返回列表
                </a>
            </div>
        </form>
    </div>

    <!-- 页脚 -->
    <footer class="mt-12 text-center text-gray-500 text-sm">
        <p>© 2023 用户管理系统 | 编辑用户页面</p>
    </footer>
</div>

<!-- 简单的交互脚本 -->
<script>
    // 为输入框添加获取焦点时的微动画
    document.querySelectorAll('input, select').forEach(element => {
        element.addEventListener('focus', () => {
            element.parentElement.classList.add('scale-[1.01]');
            element.parentElement.style.transition = 'transform 0.2s ease-in-out';
        });

        element.addEventListener('blur', () => {
            element.parentElement.classList.remove('scale-[1.01]');
        });
    });

    // 表单提交前的简单验证提示
    document.querySelector('form').addEventListener('submit', (e) => {
        const username = document.getElementById('username').value;
        if (!username.trim()) {
            alert('用户名不能为空');
            e.preventDefault();
            return false;
        }

        const password = document.getElementById('password').value;
        if (!password.trim()) {
            alert('密码不能为空');
            e.preventDefault();
            return false;
        }

        return true;
    });
</script>
</body>
</html>
